<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container"><!-- 我是注释 --><div class="box" myarrt="hello">我是元素</div>55555</div>

    <script>
        // 节点类型：1.可以通过nodeType判断节点的类型 返还一个数字；
        // 2.每个节点 可以通过nodeName获取节点名 可以通过nodeValue获取节点值；
        var containerEle = document.querySelector(".container");
        var nodes = containerEle.childNodes;
        // console.log(nodes);
        // 1.注释节点；  节点类型是 8 （了解）
        // 节点名是：#comment
        // 节点值是：注释内容；
        // var ele = nodes[0];
        // // console.log(ele.nodeType);
        // // 节点名
        // // console.log(ele.nodeName);
        // // 节点值
        // console.log(ele.nodeValue);

        // 2.元素节点
        // var ele = nodes[1];

        // // 元素节点类型 ： 是1 
        // // console.log(ele.nodeType);
        // // 节点名:是标签名 是大写；
        // // console.log(ele.nodeName);
        // // 节点值：是null
        // console.log(ele.nodeValue);

        // 3.文本节点
        
        // var ele = nodes[2];
        // 节点类型 3
        // console.log(ele.nodeType);
        // 节点名:#text
        // console.log(ele.nodeName);
        // 节点值:文本的内容
        // console.log(ele.nodeValue);
        // var textNode = document.createTextNode("1111");
        // console.log(textNode.nodeType);

        // 4.属性节点
        // 获取属性节点
        // var ele = nodes[1];
        // var attr = ele.attributes;
        // // 节点类型 ：2 
        // // console.log(attr[0].nodeType);
        // // console.log(attr[1].nodeType);

        // // 节点名： 属性名
        // // console.log(attr[0].nodeName);
        // // 节点值：属性值
        // console.log(attr[1].nodeValue)

    </script>
</body>
</html>